<script setup>
import { defineProps, ref } from "vue";
import { teamStatusMapping } from "../util/relationshipMapping.js";
import { useRoute, useRouter } from "vue-router";
import { joinTeam, exitTeam, disbandTeam } from "../services/team.js";
import { Dialog } from "vant";
// 逆天bug
const vDialog = Dialog.Component;

const router = useRouter();
const showPasswordDialog = ref(false);
const password = ref("");
const toTeam = ref({});
const props = defineProps({
    teamList: Object,
    currentUserId: Number,
});
// 判断当前用户是不是队伍成员
const isPart = (currentUserId, team) => {
    const joinUserList = team.userVOList;
    const joinUserIdList = joinUserList.map((joinUser) => joinUser.id);
    if (joinUserIdList.includes(currentUserId)) return true;
    return false;
};
// 判断当前用户是不是队伍队长
const isLeader = (currentUserId, team) => {
    const leaderUserId = team.leaderUser.id;
    if (currentUserId == leaderUserId) return true;
    return false;
};
// 进入修改队伍页面，并传递参数
const toUpdate = (team) => {
    router.replace({
        path: "/inter/user/updateTeam",
        query: {
            ...team,
        },
    });
};
// 加入队伍
const join = async (team) => {
    if (team.status == 2) {
        // 加密 toTeam
        toTeam.value = team;
        showPasswordDialog.value = true;
        if (flag) router.go(0);
    } else {
        // 不加密
        const flag = await joinTeam(team.id, null);
        if (flag) router.go(0);
    }
};
// 退出队伍
const exit = async (teamId) => {
    const flag = await exitTeam(teamId);
    if (flag) router.go(0);
};
// 解散队伍
const disband = async (teamId) => {
    const flag = await disbandTeam(teamId);
    if (flag) router.go(0);
};
// 取消加入加密队伍
const onCancelPasswordDialog = (team) => {
    password.value = "";
};
// 确认加入加密队伍
const onConfirePasswordDialog = async () => {
    const flag = await joinTeam(toTeam.value.id, password.value);
    toTeam.value = {};
    password.value = "";
    if (flag) router.go(0);
};
</script>
<template>
    <div id="teamCardList">
        <van-card
            v-for="team in props.teamList"
            :desc="team.description"
            :title="team.name"
            thumb="https://lishui-bucket.oss-cn-beijing.aliyuncs.com/avatar/1.jpg"
        >
            <template #tags>
                <van-tag plain type="danger">{{
                    teamStatusMapping[team.status]
                }}</van-tag>
            </template>
            <template #bottom>
                <div>{{ `队长: ${team.leaderUser.username}` }}</div>
                <div>{{ `人数: ${team.currentNum} / ${team.maxNum}` }}</div>
                <div>{{ `过期时间: ${team.expireTime}` }}</div>
                <div>{{ `创建时间: ${team.createTime}` }}</div>
            </template>
            <template #footer>
                <van-button
                    v-if="!isPart(props.currentUserId, team)"
                    plain
                    type="primary"
                    size="mini"
                    @click="join(team)"
                    >加入队伍</van-button
                >
                <van-button
                    v-if="isLeader(props.currentUserId, team)"
                    plain
                    type="primary"
                    size="mini"
                    @click="toUpdate(team)"
                    >修改队伍</van-button
                >
                <van-button
                    v-if="isPart(props.currentUserId, team)"
                    plain
                    type="primary"
                    size="mini"
                    @click="exit(team.id)"
                    >退出队伍</van-button
                >
                <van-button
                    v-if="isLeader(props.currentUserId, team)"
                    plain
                    type="danger"
                    size="mini"
                    @click="disband(team.id)"
                    >解散队伍</van-button
                >
            </template>
        </van-card>
        <van-empty
            v-if="!teamList || teamList.length < 1"
            description="暂无队伍信息QAQ!"
        />
        <vDialog
            v-model:show="showPasswordDialog"
            title="请输入密码"
            show-cancel-button
            @cancel="onCancelPasswordDialog()"
            @confirm="onConfirePasswordDialog()"
        >
            <van-field v-model="password" placeholder="请输入密码" />
        </vDialog>
    </div>
</template>
<style scoped>
#teamCardList :deep(.van-card__header) {
    margin-top: 10px;
}
#teamCardList :deep(.van-image__img) {
    margin-top: 20px;
}
</style>
